<template>
    <div>
        <el-container>
            <el-header>
                <div id="title">课程班级</div>
                <div><i class="el-icon-search" id="icon"></i></div>
                <el-input v-model="input" placeholder="搜索课程" id="input"></el-input>
                <div id="jia">创建班级</div>
                <div id="tong">通知</div>
                <div><i class="el-icon-user-solid" id="icon1"></i></div>
            </el-header>
            <el-main style="background-color: white;">
                <div id="img">头像   <el-avatar :size="100" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                    style="position: relative;top: 30px; left:10px"></el-avatar>
                </div>
                <div id="name">
                姓名 <el-input v-model="name" placeholder="" style="width: 200px;"></el-input>
                </div>
                <div id="school">
                    学校 <el-select v-model="school" placeholder="请选择" style="width: 200px;">
                    <el-option
                    v-for="item in schools"
                    :key="item.name"
                    :label="item.label"
                    :value="item.name">
                    </el-option>
                    </el-select>
                </div>
                <div id="faculty">
                院系 <el-input v-model="faculty" placeholder="" style="width: 200px;"></el-input>
                </div>
                <div id="gender">
                    <el-radio v-model="gender" label="1">男</el-radio>
                    <el-radio v-model="gender" label="2">女</el-radio>
                </div>
                <div id="button">
                    密码  <el-button type="primary" @click="alter">更改密码</el-button>
                </div>
                <div id="save">
                      <el-button type="primary" @click="save">保存</el-button>
                </div>
            </el-main>
        </el-container>
    </div>
</template>
<style>
#img{
    position: absolute;
    left:45%;
}
#name{
    position: absolute;
    top: 25%;
    left:45%
}
#school{
    position: absolute;
    top:45%;
    left:45%;
}
#faculty{
    position:absolute;
    left:45%;
    top:35%
}
#gender{
    position:absolute;
    left: 45%;
    top: 55%;
}
#button{
    position:absolute;
    left:45%;
    top: 65%;
}
#save{
    position: absolute;
    left: 75%;
    top: 75%;
}
.grid-cotainer{
    display:grid;
    grid-template-columns: repeat(3,300px);
    grid-gap:50px;
}
.grid-item{
    padding: 20px;
    border:1px solid;
    border-radius: 5px;
}
  .el-col {
    border-radius: 4px;
  }
  .el-row {
    margin-bottom: 20px;
  }
  .bg-purple-light {
    background: #0c2152;
  }
  .bg-purple-dark {
    background: #830608;
  }
  .el-header{
    background-color: rgb(85,85,85);
    color: #333;
    text-align: center;
    line-height: 80px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
  #title{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:80px;
  }
  #icon{
    color: white;
    font-size: 25px;
    position: absolute;
    top:30px;
    left:700px;
  }
  #input{
    height:33px;
    width:230px;
    position: absolute;
    top:-30px;
    left:700px;
  }
  #jia{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1000px;
  }
  #tong{
    color: #E9EEF3;
    position:absolute;
    top: 0px;
    left:1200px;
  }
  #icon1{
    color: white;
    font-size:40px;
    position: absolute;
    top:20px;
    left: 1350px;
  }
  
</style>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      name:'张三',
      school:'三峡大学',
      gender: '1',//男1  女2

      schools: [{
          type: '三峡大学',
          label: '三峡大学'
        }, {
          type: '长江大学',
          label: '长江大学'
        }, {
          type: '武汉大学',
          label: '武汉大学'
        }],
    }
  },
  mounted(){
    //传出数据 id-该老师的id
    //返回数据 name，school，gender（1男2女）
    axios.post('',{
      id:this.$store.state.ID
    }).then(res=>{
      this.name=res.data.name
      this.school=res.data.school
      this.gender=res.data.gender
    })
  },
  methods:{
    alter(){
        this.$router.push('/alter')
    },
    save(){
      //向后端提交更改的个人信息 name-姓名 school-学校 gender-性别 1男2女
      //返回success boolean类型表示是否保存成功
        axios.post('http://127.0.0.1:4523/m2/5591894-5270100-default/243073407?apifoxApiId=243073407',{
            name:this.name,
            school:this.school,
            gender:this.gender
        }).then(res=>{
            if(res.data.success){
                alert('保存成功')
                this.$router.push('/TeaHome')
            }
        })
    }
  }
}
</script>